<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<title>Drag non-tree source to tree</title>
</html>

<body>
<script type="text/javascript">
    var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>

<script type="text/javascript" src="../../../dojo.js"></script>
<script type="text/javascript">

    dojo.require("dojo.dnd.*");
    dojo.require("dojo.event.*");
    dojo.require("dojo.widget.*");
    dojo.require("dojo.widget.TreeV3");
    dojo.require("dojo.widget.TreeNodeV3");
    dojo.require("dojo.widget.TreeBasicControllerV3");
    dojo.require("dojo.widget.TreeDndControllerV3");
    dojo.hostenv.writeIncludes();

    /**
    * will generate tree node unless iWillBecomeNothing is set
    */
    function makeTransformer(elem) {
        return function() {
            if (dojo.html.hasAttribute(elem,"iWillBecomeNothing")) {
                return null;
            } else {            
                return {title:elem.innerHTML}
            }
        };
    }

    dojo.addOnLoad(function() {
        var dl = dojo.byId("dragList1");
        var lis = dl.getElementsByTagName("li");
        for(var x=0; x<lis.length; x++){
            var elem = lis[x]
            var source = new dojo.dnd.HtmlDragSource(elem, "li1");
            
            // makeTransformer is separate function on purpose (no closure)
            // getTreeNode will be called on drop
            // its result will be inserted
            source.getTreeNode = makeTransformer(elem);
            
            // this will happen with source object after it is dropped                  
            source.onDrop = function() { 
                dojo.html.removeNode(this.domNode) 
            }
        }

    });

</script>

<h3>Drag list member to tree</h3>

<ul id="dragList1">
    <li>list 1 item 1 
        <a href="http://www.google.com">Google</a>
        <input value="type in me">
        <input type="button" value="ClickMe">
        <input type="checkbox">
        <input type="radio" name="radio" value="1" checked> 
        <button>Inline Button</button>
    </li>
    <li>list 1 item 2</li>
    <li>list 1 item 3</li>
    <li iWillBecomeNothing="true">I will become nothing in Tree</li>
</ul>


<div dojoType="TreeBasicControllerV3" widgetId="controller"></div>  
<div dojoType="TreeDndControllerV3" controller="controller" widgetId="dndcontroller"></div> 

<div dojoType="TreeV3" listeners="controller;dndcontroller" DndMode="ONTO;BETWEEN"  DNDacceptTypes="li1">
    <div dojoType="TreeNodeV3" title="Item 1" widgetId="Item 1">
        <div dojoType="TreeNodeV3" title="Item 1.1" widgetId="Item 1.1"></div>
        <div dojoType="TreeNodeV3" title="Item 1.2" widgetId="Item 1.2"></div>
    </div>

    <div dojoType="TreeNodeV3" title="Item 2<br/>title long yeah" widgetId="Item 2">
        <div dojoType="TreeNodeV3" title="Item 2.1" widgetId="Item 2.1"></div>
    </div>

    <div dojoType="TreeNodeV3" title="Empty Folder" isFolder="true" widgetId="Item 3"></div>
    <div dojoType="TreeNodeV3" title="Item 4" widgetId="Item 4"></div>
</div>
</body>
</html>